<template>
  <div
    class="v-shape-font-pattern"
    style="height: 100%"
  >
    <m-dropdown
      class="g-jc-sb g-pd-lr-7 g-pointer _slect-border _font-weight"
      :class="{ 'g-disabled': disabled }"
      style="align-items: center; height: 100%"
    >
      <span class="g-one-line">
        {{ $t(label) }}
      </span>
      <img src="statics/images/sidebar/arrowDown.svg" />
      <template #dropdown>
        <m-dropdown-menu-item
          v-for="item in fontWeights"
          :key="item.label"
          class="g-jc-sb __format-define g-m-b-4"
          @click="handleClickFontWeight(item)"
        >
          <span>
            {{ $t(item.label || "") }}
          </span>
        </m-dropdown-menu-item>
      </template>
    </m-dropdown>
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { ShapeStyleValue } from "@/modules/model/modals/shapeCustomization/ShapeCustomizationManagementModel";

const props = defineProps<{
  row: ShapeStyleValue;
  selected?: boolean;
  configurationDisabled?: boolean;
}>();

const disabled = computed(() => {
  return props.configurationDisabled;
});

const label = computed(() => {
  if (!props.row.value) return "";
  const font = fontWeights.find(v => v.value === props.row.value);
  return font?.label || "";
});

enum Font {
  NORMAL = "normal",
  ITALIC = "italic",
  BOLD = "Bold",
  ITALIC_BOLD = "italicAndBold"
}

type FontDto = {
  label: string;
  value: Font;
  fontWeightValue: number;
  fontStyleValue: string;
};

const fontWeights: FontDto[] = [
  { label: "正常", value: Font.NORMAL, fontWeightValue: 400, fontStyleValue: "normal" },
  { label: "倾斜", value: Font.ITALIC, fontWeightValue: 400, fontStyleValue: "italic" },
  { label: "加粗", value: Font.BOLD, fontWeightValue: 700, fontStyleValue: "normal" },
  { label: "倾斜加粗", value: Font.ITALIC_BOLD, fontWeightValue: 700, fontStyleValue: "italic" }
];

const handleClickFontWeight = (item: FontDto) => {
  props.row.value = item.value;
};
</script>

<style lang="scss">
.v-shape-font-pattern {
  .height-100 {
    height: 100%;
  }
}
</style>
